<template>
  <view class="list-item-box flex-column" :style="{ width }" @click="jump(`/pages/detail/detail?tt_album_id=${item.album_id}&tt_episode_id=${item.episode_id}`)">
    <view class="img-box relative" :style="{ height }">
      <image v-if="ranking" :src="`/static/top${ ranking < 7 ? ranking : '' }.png`" class="ranking" />
      <image :src="item.img" class="width-full height-full block" lazy-load />
      <view v-if="pageView" class="mask width-full flex-row align-center">
        <image src="/static/play.png" class="play block" />
        <text class="text-20 color-white">{{ item.bfl }}万</text>
      </view>
    </view>
    <view class="text-overflow-one margin-top-8">
      <text class="text-28 color-black text-overflow-one">{{ item.name }}</text>
    </view>
    <text class="text-24 color-t2 margin-top-8">全{{item.seq_num}}集</text>
  </view>
</template>

<script setup lang="ts">
import { jump } from '@/common/util'
import type { AnyObject } from '@/common/types'

interface IProps{
  width?: string,
  height?: string,
  ranking?: number,
  pageView: boolean,
  item: AnyObject
}
withDefaults(defineProps<IProps>(), {
  pageView: true
})
</script>

<style scoped lang="scss">
@include setMargin(top, 8);

.list-item-box {
  width: 194rpx;

  .img-box{
    height: 290rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }

  .ranking{
    width: 44rpx;
    height: 58rpx;
    @include position(absolute, -8rpx, $left: -8rpx, $z-index: 2);
  }

  .mask{
    height: 63rpx;
    background: linear-gradient( 180deg, rgba(0,0,0,0) 2%, rgba(0,0,0,0.68) 85%);
    padding-left: 16rpx;
    @include position(absolute, $left: 0, $bottom: 0, $z-index: 2);

    .play{
      width: 24rpx;
      height: 24rpx;
    }

  }

}
</style>
